<template>
	<div class="app-container">
		<div class='left search'>
			<el-button size="medium" @click="addFn">添加</el-button>
		</div>
		<div class='tableInfo'>
			<el-table v-model='listLoading' :data="tableList" ref='elTable' border style="width: 100%">
				<el-table-column  type="index" width="50" align="left" /> 
				<el-table-column label="缴费类目" prop="fee_types" align="left" min-width="120" />
				<el-table-column label="商户名" prop="merchant_name" align="left" min-width="200" />
				<el-table-column label="富滇银行belgId" prop="belgId" align="left" min-width="140" />
				<el-table-column label="富滇银行multichnlId" prop="multichnlId" align="left" min-width="140" />
				<el-table-column label="富滇银行provrId" prop='provrId' align="left" min-width="140" />
				<el-table-column label="公司签章">
					<template slot-scope="{row}">
						<el-image v-if='row.seal' :src='row.seal' class='sealImg' fit='contain'
							:preview-src-list="srcList"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
					<template slot-scope="{row}">
						<el-button @click='editDataFn(row)' type="primary">编辑</el-button>
						<el-button type="danger" @click='deleteDataFn(row.id)'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 添加 -->
		<el-dialog :title="title" :visible.sync="addShow" width="50%" @closed='closeDialogFn'>
			<el-form :model="formDataInfo" :rules="rules" ref="ruleForm" label-width="200px">
				<el-form-item label="富滇银行multichnlId" prop="multichnlId">
					<el-input v-model="formDataInfo.multichnlId"></el-input>
				</el-form-item>
				<el-form-item label="富滇银行provrId" prop="provrId">
					<el-input v-model="formDataInfo.provrId"></el-input>
				</el-form-item>
				<el-form-item label="富滇银行belgId" prop="belgId">
					<el-input v-model="formDataInfo.belgId"></el-input>
				</el-form-item>
				<el-form-item label="缴费类目" prop="fee_types">
					<el-select v-model="formDataInfo.fee_types" multiple placeholder="请选择" style="width:100%;">
						<el-option v-for="item in feeOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商户名" prop="merchant_name">
					<el-input v-model="formDataInfo.merchant_name"></el-input>
				</el-form-item>
				<el-form-item label="公司签章" style="font-weight: 600 !important;">					
					<el-upload action="#" list-type="picture-card" :file-list='imgList'
						 :limit='1' accept="image/png,image/jpg,image/jpeg"  
						 :on-change="handleImageFn" :auto-upload='false'>						
						   <i class="el-icon-plus"></i>						
					</el-upload>											
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addShow = false">取 消</el-button>
				<el-button type="primary" v-if='num==0' @click="addInfoFn('ruleForm')">确 定</el-button>
				<el-button type="primary" v-else-if='num==1' @click="editInfoFn('ruleForm')">提 交</el-button>
			</span>
		</el-dialog>


	</div>
</template>

<script>
	// import UploadOne from '@/components/Upload/UploadOne'
	export default {
		// components: {
		// 	UploadOne
		// },
		data() {
			return {
				imgList: [], //公司签章
				imageUrl:'',
				apiPath: "member.Billingsetting", //接口路径
				imgPath:'member.Billing',//上传图片的接口路径
				tableList: [],
				addShow: false, //添加数据
				formDataInfo: {
					multichnlId: '', //富滇银行multichnlId
					provrId: '', //富滇银行provrId
					belgId: '', //富滇银行belgId
					fee_types: '', //缴费类目, 多个用逗号分隔
					merchant_name: '', //商户名
					seal:'' //图片路径
					
				},
				srcList: [], //图片预览
				title: '添加',
				//缴费类目
				feeOptions: [{
						value: '电费',
						label: '电费'
					},
					{
						value: '水费',
						label: '水费'
					},
					{
						value: '保证金',
						label: '保证金'
					},
					{
						value: '押金',
						label: '押金'
					},
					{
						value: '商管费',
						label: '商管费'
					},
					{
						value: '租金',
						label: '租金'
					},
					{
						value: '管理费',
						label: '管理费'
					},
				],
				rules: {
					multichnlId: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					provrId: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					belgId: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					merchant_name: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					fee_types: [{
						required: true,
						message: '请选择费用类型',
						trigger: 'change'
					}]
				},
				num: 0,
				id_str: '', //id
				dialogImageUrl: '', //显示的签章
				dialogVisible: false,
				listLoading:true


			}
		},
		created() {
			//获取商户收款配置列表
			this.get_list();
		},
		methods: {
			//上传签章
			handleImageFn(file, fileList){
				this.imglist = fileList;
				let fileInfo = file.raw;				
				if(fileInfo){
				 this.$api.uploadImg({file:fileInfo},this.imgPath).then(res=>{
				 	this.formDataInfo.seal = res.file_path;					
				 });	
				}
				
			},
			
			//文件上传回调
			// uploadCallBack(res, fieldName) {
			// 	if (fieldName) {
			// 		this.formDataInfo[fieldName] = res.fileName;
			// 		this.formDataInfo[fieldName + '_str'] = res.showUrl;
			// 	} else {
			// 		this.$message('图片字段错误！');
			// 	}
			// },
			get_list() {
				this.listLoading = true;
				this.$api.noQueryList(this.apiPath).then(res => {
					this.tableList = res.list;
					let arr = [];
					res.list.forEach(item => {
						arr.push(item.seal);
					});
					this.srcList = arr;
					this.listLoading = false;
				});
			},
			//关闭对话框
			closeDialogFn() {
				this.imgList = [];
				this.formDataInfo = {
					multichnlId: '', //富滇银行multichnlId
					provrId: '', //富滇银行provrId
					belgId: '', //富滇银行belgId
					fee_types: '', //缴费类目, 多个用逗号分隔
					merchant_name: '', //商户名
					seal: '',
					
				};
				this.num = 0;
			},
			//添加
			addFn() {
				this.$nextTick(() => { //清空表单验证的数据
					if (this.$refs.ruleForm) {
						this.$refs.ruleForm.resetFields();
					}
				});
				this.imgList = [];
				this.formDataInfo = {
					multichnlId: '', //富滇银行multichnlId
					provrId: '', //富滇银行provrId
					belgId: '', //富滇银行belgId
					fee_types: '', //缴费类目, 多个用逗号分隔
					merchant_name: '', //商户名
					seal: ''					
				};
				
				this.num = 0;
				this.addShow = true;
			},
			//保存
			addInfoFn(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let feeInf0 = this.formDataInfo.fee_types.join(',');
						let data = {
							multichnlId: this.formDataInfo.multichnlId,
							provrId: this.formDataInfo.provrId,
							belgId: this.formDataInfo.belgId,
							fee_types: feeInf0,
							merchant_name: this.formDataInfo.merchant_name,
							seal:this.formDataInfo.seal
						}
						//console.log(data);
						this.$api.add(data, this.apiPath).then(res => {
							if (res.id) {
								this.$message({
									message: '添加成功',
									type: 'success'
								});
								this.addShow = false;
								this.get_list();
							}
						});
					} else {
						//console.log('error submit!!');
						return false;
					}
				});
			},
			//编辑
			editDataFn(row) {
				this.$nextTick(() => { //清空表单验证的数据
					if (this.$refs.ruleForm) {
						this.$refs.ruleForm.resetFields();
					}
				});
				this.imgList = [];
				if(this.imgList.length == 0){
					this.formDataInfo = {
						multichnlId: '', //富滇银行multichnlId
						provrId: '', //富滇银行provrId
						belgId: '', //富滇银行belgId
						fee_types: '', //缴费类目, 多个用逗号分隔
						merchant_name: '', //商户名
						seal: '',					
					};					
					let rowCopy = {
						...row
					}			 			
					this.formDataInfo = rowCopy;
					//公司签章的回显
					this.formDataInfo.seal = rowCopy.seal;				
					let imgarr = this.formDataInfo.seal.split(',');
					let imgArr = [];
					 imgarr.forEach(item=>{
						let data = {};
						data.name='food.jpeg',
						data.url = item;
						imgArr.push(data)
					 })
					 this.imgList = imgArr; 
					//console.log(this.imgList)					
					if (rowCopy.fee_types) {
						rowCopy.fee_types = rowCopy.fee_types.split(',');
					}				
					this.title = '编辑';
					this.id_str = row.id;
					this.num = 1;
					this.addShow = true; 
				}
				
			},
			//提交
			editInfoFn(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let feeInf0 = this.formDataInfo.fee_types.join(',');
						let data = {
							multichnlId: this.formDataInfo.multichnlId,
							provrId: this.formDataInfo.provrId,
							belgId: this.formDataInfo.belgId,
							fee_types: feeInf0,
							merchant_name: this.formDataInfo.merchant_name,
							id: this.id_str,
							seal:this.formDataInfo.seal
						}
						this.$api.edit(data, this.apiPath).then(res => {
							if (res) {
								this.$message({
									message: '修改成功',
									type: 'success'
								});
								this.addShow = false;
								this.get_list();
							}
						});
					} else {
						//console.log('error submit!!');
						return false;
					}
				});
			},
			//删除
			deleteDataFn(id) {
				this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: '提示'
				}).then(() => {
					this.$api.del({
						id_str: id
					}, this.apiPath).then(response => {
						//获取账单列表
						this.get_list();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}


		}
	}
</script>

<style lang='scss' scoped>
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9346e;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
	.tableInfo {
		margin-top: 20px;

		.sealImg {
			width: 100px;
			/* height: 100px; */
		}
	}
</style>